<template>
  <!-- 我的考勤 -->
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="我是有底线的"
      @load="onLoadlist"
    >
      <div style="height:15px;background: #f8f8fa"></div>
      <div
        v-for="(item,i) in list"
        :key="i"
      >
        <div
          class="attendance_top"
          v-for="(item1,index) in item"
          :key="index"
        >
          <p><span>{{item1.day}}</span></p>
          <p style="margin1-top:10px"><span v-if="item1.type=='OnDuty'">上班</span><span v-else-if="item1.type=='OffDuty'">下班</span> <span>{{item1.time}}</span>
            <span :class="item1.time_result=='正常'?'color':'color1'">{{item1.time_result}}</span></p>
          <p :class="item1.code_b.indexOf('-') >-1?'color1':'color'">得分 <span>{{item1.code_b}}</span></p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      list: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      // pageSize: 5, // 每页条数
      pageIndex: 1, // 页码
      page: 0
    };
  },
  created() {
    this.getMyAttendance(0);
     dd.biz.navigation.setTitle({
        title: "我的考勤分" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    // 加载
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getMyAttendance(p);
    },
    async getMyAttendance(cursor) {
         let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http
        .get(
          `yuepoints/myAttendance?corpId=${corpId}&userId=${userId}&cursor=${cursor}`
        )
        .then(res => {
          const { data, cursor,errcode } = res.data;
          if(errcode=="0000"){
             if (Object.keys(data).length === 0 || data === null) {
            this.finished = true;
            // this.$toast("数据为空！");
            return;
          }
          if (this.pageIndex === 1) {
            this.list = data;
          } else {
            this.list = Object.assign({}, this.list, data);
          }
          if (cursor > 0) {
            this.page = cursor;
          }
          }else{
             this.finished = true;
             this.list=[]
          }
         
        })
        .catch(error => {
          // this.$toast({
          //   showClose: true,
          //   message: "获取资源列表异常{" + error + "}",
          //   type: "error"
          // });
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  // width: 90%;
  // padding: 10px auto;
  margin-bottom: 55px;
  background: #f8f8fa;
  p {
    margin: 0px;
    padding: 0px;
  }
  .attendance_top {
    margin: 0px 10px;
    background: #fff;
    box-shadow: 0px 9px 4px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
    text-align: left;
    font-size: 16px;
    padding: 8px 15px;
    margin-bottom: 10px;

    .color {
      color: rgb(7, 173, 110);
    }
    .color1 {
      color: red;
    }

    p:last-child {
      font-size: 13px;
      // color: rgb(7, 173, 110);
      margin-top: 5vh;
    }
  }
}
</style>
